<template>
	<view class="svc-rdr-nf">
		<view class="title">
			<image :src="info.headImg" mode="aspectFill"></image>
			<view class="name">{{info.nickName}}</view>
			<text>订单ID: {{info.orderNumber}}</text>
		</view>
		<view class="body">
			<image class="header" :src="info.pics" mode="aspectFill"></image>
			<view class="info">
				<view class="odr-name">{{info.goodsName}}</view>
				<view class="price">￥{{info.price/100}}</view>
			</view>
		</view>
		<view class="btn-group">
			<button v-if="info.status === 4" @click="confirm">确认</button>
			<button v-if="info.status === 6" @click="complete">完成</button>
			<!-- <button v-if="info.status === 1" @click="toOrderDetail">付款</button> -->
		</view>
	</view>
</template>

<script>
	import {utils} from '@/utils'
	import {Order} from '@/apis'
	export default {
		name: 'serviceOrderInfo',
		props: {
			info: {
				type: Object,
				default: {}
			}
		},
		methods: {
			toOrderDetail () {
				utils.routerTo(`/pages/serviceOrderDetail/serviceOrderDetail?number=${this.info.orderNumber}`)
			},
			confirm () {
				utils.wxAlert('您要确认吗？').then(() => {
					utils.wxLoading()
					Order.updateOrder({
						data: {
							form: {
								orderNumber: this.info.orderNumber,
								status: 6
							}
						}
					}).then(res => {
						utils.wxToastSuccess('操作成功')
						this.$emit('update')
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			complete () {
				utils.wxAlert('您确定已完成吗？').then(() => {
					utils.wxLoading()
					Order.updateOrder({
						data: {
							form: {
								orderNumber: this.info.orderNumber,
								status: 5
							}
						}
					}).then(res => {
						utils.wxToastSuccess('操作成功')
						this.$emit('update')
					}).finally(() => {
						uni.hideLoading()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.svc-rdr-nf {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		color: #333333;
		box-sizing: border-box;
		margin-top: 20rpx;
		.title {
			height: 80rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
			&::after {
				content: " ";
				display: block;
				position: absolute;
				bottom: 0;
				left: 20rpx;
				right: 20rpx;
				border-bottom: #EFEFEF 2rpx solid;
			}
			image {
				width: 60rpx;
				height: 60rpx;
				background-color: #999999;
				border-radius: 50%;
			}
			.name {
				font-size: 28rpx;
				max-width: 200rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow:ellipsis;
				box-sizing: border-box;
				padding-left: 20rpx;
			}
			text {
				color: #666666;
				font-size: 28rpx;
				flex: 1;
				text-align: right;
			}
		}
		.body {
			display: flex;
			box-sizing: border-box;
			padding: 20rpx;
			image.header {
				box-sizing: border-box;
				padding: 20rpx;
				width: 100rpx;
				height: 100rpx;
				background-color: #999;
				flex-shrink: 0;
			}
			.info {
				display: flex;
				flex-direction: column;
				flex: 1;
				.odr-name {
					font-size: 32rpx;
					line-height: 1.2;
					padding-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				.price {
					color: #FF4A4A;
					font-size: 28rpx;
					padding-top: 20rpx;
					padding-left: 20rpx;
				}
			}
		}
		.btn-group {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
			&::after {
				content: " ";
				display: block;
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				top: 0;
				border-top: #EFEFEF 2rpx solid;
			}
			button {
				height: 60rpx;
				line-height: 60rpx;
				margin: unset;
				font-size: 28rpx;
				border-radius: 30rpx;
				margin-left: 20rpx;
				border: #FF4A4A 1rpx solid;
				color: #FF4A4A;
				padding: 0 30rpx;
			}
		}
	}
</style>
